import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Form, Input, Button, Card,
} from 'antd';

const FormItem = Form.Item;

@connect()
@Form.create()
export default class ModifyPassword extends Component {
  handleSubmitUpdatePwd = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log(values);
        // this.props.dispatch({
        //   type: 'form/submitRegularForm',
        //   payload: values,
        // });
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };
    return (
      <Card bordered>
        <Form
          onSubmit={this.handleSubmitUpdatePwd}
          hideRequiredMark
          style={{ marginTop: 8 }}
        >
          <Card bordered>
            <FormItem
              {...formItemLayout}
              label="原密码"
            >
              {getFieldDecorator('oldPwd', {
                rules: [{
                  required: true,
                  message: '请输入原来的密码',
                }],
              })(
                <Input placeholder="请输入原来的密码" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="新密码"
            >
              {getFieldDecorator('newPwd', {
                rules: [{
                  required: true, message: '请输入新密码',
                }],
              })(
                <Input placeholder="请输入新密码" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="确认密码"
            >
              {getFieldDecorator('affirmPwd', {
                rules: [{
                  required: true, message: '请输入确认密码',
                }],
              })(
                <Input placeholder="请输入确认密码" />
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" size="large">
                提交
              </Button>
            </FormItem>
          </Card>
        </Form>
      </Card>
    );
  }
}
